<template>
    <div class="audit_detail">
        <div class="content_panel">
            <!-- 个人详情菜单 -->
            <detail-nav
                :active-menu="activeMenu"
                @click="scrollTo">
            </detail-nav>
            <div @scroll="scrollEvent" ref="panelList" class="panel_list" width="80%">
                <!-- 用户信息 -->
                <personal-info
                    :user-data="data.personalInfo"
                    ref="personalInfo">
                </personal-info>
                <!-- 订单详情 -->
                <order-details
                    v-if="currentStatus==='3'"
                    :data="data.personalInfo"
                    ref="orderDetails">
                </order-details>
                <!-- 电销记录 -->
                <tel-record
                    :user-data="data.personalInfo"
                    ref="telRecord">
                </tel-record>
                <!--若用户为已注册用户-->
                <detaiIntegrity ref="telIntergity" :data="userInfoData"></detaiIntegrity>
               <!-- 额度信息-->
               <quota-information
                ref="quotaInformation"
                :quotaData='quotaInfo'
               >

               </quota-information>

            </div>
        </div>
        <!--催收操作面板-->
        <div class="operation_panel" v-if="urgingPanelShow">
            <!-- 操作面板 -->
            <urging-panel :show-panel="urgingPanelShow" :remark="remark" :real-name="data.realName" :app-name="data.appName" :phone="data.phone"></urging-panel>
        </div>
    </div>
</template>

<script>
// import storage from '@/libs/storage';
import detailNav from './detail-menu';
import personalInfo from './personal-info';
import telRecord from './tel-record.vue';
import urgingPanel from './urging-panel';
import orderDetails from './order-details.vue';
import detaiIntegrity from './data-integrity.vue';
import quotaInformation from './quota-information.vue';

export default {
    name: 'auditDetail',
    components: {
        detaiIntegrity,
        detailNav,
        personalInfo,
        telRecord,
        urgingPanel,
        orderDetails,
        quotaInformation
    },
    data() {
        return {
            remark:"",
            urgingPanelShow: false,
            query: {
                userId: '', // 地址参数
                telUserId: '', //
                nextIndex: '', // 下一个
                id: '' // 主键
            },
            userId: this.$storage.get('userId'),
            currentStatus: this.$route.query.currentStatus,
            refsOffsetTop: [], // 个人信息等模块offsetTop集合
            activeMenu: 'personalInfo', // 激活的菜单
            menuClick: false, // 是否是菜单点击事件
            data: {
                personalInfo: [],
                realName: '',
                phone: '',
                appName: '',
            }, // 用户信息
            quotaInfo:[],//额度信息
            updateTableType: '',
            orderData: [],
            userInfoData:[]
        };
    },
    methods: {
        getUserContractAmount(params){
            console.warn(params)
            this.$api.telSales.getUserContractAmount(params).then(res=>{
                let {status,error,data} = res;
                if (status === '1' && error === '00000000' && data){
                    this.quotaInfo = [data]
                }
            })

        },
        getUserInfoProportion(params){
            params.version = '1.0.0'
            this.$api.customer.getUserInfoProportion(params).then(res=>{
                let {status,error,data} = res;
                if (status === '1' && error === '00000000' && data){
                    let obj = {
                        isRegister:this.$t('common.yes'),
                        USERPERSONALINFO:data.USER_PERSONAL_INFO==1?this.$t('common.completed'):this.$t('common.noCompleted'),
                        USERCONTACT:data.USER_CONTACT==1?this.$t('common.completed'):this.$t('common.noCompleted'),
                        USERBASEINFO:data.USER_BASE_INFO==1?this.$t('common.completed'):this.$t('common.noCompleted'),
                        USERJOB:data.USER_JOB==1?this.$t('common.completed'):this.$t('common.noCompleted'),
                        USERCARDID:data.USER_CARD_ID==1?this.$t('common.completed'):this.$t('common.noCompleted')
                    };
                    this.userInfoData.push(obj)
                }
            })
        },
        getUserInfo(telUserId) {
            // 获取用户信息
            this.$api.telSales.getRecordInfoByTelUserId({telUserId}).then((res) => {
                const {status, data, error} = res;
                if (status === '1' && error === '00000000' && data) {
                    // this.$set(this.data.personalInfo, '0', data);
                    this.data.personalInfo.push(data);
                    this.data.realName = data.name || '';
                    this.data.phone = data.phone || '';
                    this.data.appName = data.appName || '';
                    if (!this.currentStatus) {
                        this.currentStatus = String(data.currentStatus);
                    }
                }
            });
        },
        scrollTo(module) {
            // scroll to module
            const panelTop = this.$refs.panelList.offsetTop;
            const moduleTop = this.$refs[module].$el.offsetTop;
            this.$refs.panelList.scrollTop = moduleTop - panelTop;
            this.menuClick = true;
        },
        calcOffsetTop() {
            // calculate modules offsetTop
            const panelEle = this.$refs.panelList;
            const panelTop = panelEle.offsetTop;
            Object.keys(this.$refs).forEach((ref) => {
                if (ref !== 'panelList') {
                    const nextEleSibling = this.$refs[ref].$el.nextElementSibling;
                    this.refsOffsetTop.push({
                        module: ref,
                        offsetTop: this.$refs[ref].$el.offsetTop - panelTop,
                        nextOffsetTop: nextEleSibling ? (nextEleSibling.offsetTop - panelTop) : -1
                    });
                }
            });
        },
        scrollEvent(e) {
            // listening panel scroll event
            if (this.menuClick) {
                // 防止震荡
                this.menuClick = false;
                return;
            }
            const ele = e.target || e.srcElement;
            this.refsOffsetTop.forEach((module) => {
                if (module.nextOffsetTop != -1 && module.offsetTop <= ele.scrollTop && module.nextOffsetTop > ele.scrollTop) {
                    this.activeMenu = module.module;
                } else if (module.nextOffsetTop == -1 && module.offsetTop <= ele.scrollTop) {
                    this.activeMenu = module.module;
                }
            });
        },

        mergeData(target, source) {
            // 合并数据
            if (!source || typeof source !== 'object') {
                return;
            }
            Object.keys(target).forEach((key) => {
                if (!target[key] && source[key]) {
                    target[key] = source[key];
                }
            });
        },
        updateTable(val) {
            this.updateTableType = val;
        }
    },
    mounted() {
        this.calcOffsetTop();
    },
    created() {
        const { telUserId } = this.$route.params;
        const { currentStatus ,register,phone,domain,company,appName,remark} = this.$route.query;
        this.remark = remark;
        if(register/1===1){
            this.getUserInfoProportion({phone,domain,company,appName})
        }
        this.currentStatus = currentStatus;
        this.urgingPanelShow = currentStatus === '1'|| currentStatus === '2';
        if (telUserId && telUserId !== 'null') {
            this.getUserInfo(telUserId);
        };
        this.getUserContractAmount({appName,phone})
    }
};
</script>
<style lang="scss">
@import "~@/assets/scss/function";

[data-page=telemarketing-telManage-salesDetails] {
    .left_menu {
        display: none;
    }
    .content {
        display: flex;
    }
    .tips_text {
        text-align: center;
        margin: 16px 0;
        span {
            color: red;
            text-decoration: underline;
            font-weight: bold;
        }
    }
    .detail_module_panel {
        padding: 0 12px;
    }
    .detail_panel_title_icon {
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 20px 20px;
    }
    .detail_panel_title {
        padding-left: 32px;
        margin: 0;
        font-size: 14px;
        height: 52px;
        line-height: 52px;
        border-bottom: 1px solid $colorSplit;
    }
    .panel_info_content {
        padding: 20px 0;
        .row {
            margin-bottom: 12px;
            &:last-child {
                margin-bottom: 0;
            }
        }
        .label {
            color: #a6a8aa;
            font-size: 12px;
            text-align: right;
            padding: 0 8px;
        }
        .info {
            font-size: 12px;
            padding: 0 8px;
        }
        .imgs {
            li {
                display: inline-block;
                width: 200px;
                margin-right: 24px;
                border: 1px solid $colorSplit;
                border-radius: 8px;
                overflow: hidden;
                a {
                    display: block;
                    height: 112px;
                    width: 100%;
                    background-color: #e5e5e5;
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: cover;
                }
                .img_desc {
                    height: 32px;
                    line-height: 32px;
                    padding: 0 16px;
                }
            }
        }
    }
    .panel_info_content_title {
        color: #5e6061;
        font-size: 14px;
        .dot {
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: #5e6061;
            margin-right: 10px;
            margin-bottom: 2px;
        }
    }
    // 历史贷款信息列表
    .loan_history_table {
        th {
            background-color: #f4f5f6;
        }
    }
    // 个人信息icon
    .personal_info_icon {
        background-image: url("~@/assets/img/icon_personal_info.png");
    }
    // 工作/学生信息icon
    .work_student_icon {
        background-image: url("~@/assets/img/icon_work_student.png");
    }
    // 材料信息icon
    .other_info_icon {
        background-image: url("~@/assets/img/icon_other_info.png");
    }
    // 联系人icon
    .contacts_icon {
        background-image: url("~@/assets/img/icon_contacts.png");
    }
    // 历史贷款信息icon
    .loan_history_icon {
        background-image: url("~@/assets/img/icon_personal_info.png");
    }

    // 操作面板
    .el-select {
        width: 100%;
    }
    .el-form-item__label {
        font-size: 12px;
        line-height: 17px;
        color: #a6a8aa;
        padding-bottom: 8px;
    }
    .el-form-item {
        margin-bottom: 16px;
    }
}
</style>
<style lang="scss" scoped>
@import "~@/assets/scss/function";

.audit_detail {
    display: flex;
    height: 100%;
    width: 100%;
}

.content_panel {
    flex: 1;
    padding: 16px 16px 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.operation_panel {
    width: 360px;
    background-color: #fff;
    /*padding: 16px;*/
    overflow: auto;
    box-shadow: -1px 0 4px 0 rgba(0, 0, 0, 0.05);
}

.panel_list {
    background-color: #fff;
    flex: 1;
    overflow: auto;
}

.placeholder {
    height: 212px;
    position: relative;
    margin: 0 -16px 0;
    overflow: visible;
}

.tables {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: $colorBg;
    height: 500px;
}

.tabs {
    background-color: $primary;
    position: relative;
    li {
        display: inline-block;
        a {
            color: rgba(255, 255, 255, 0.6);
            display: block;
            padding: 0 24px;
            height: 44px;
            line-height: 44px;
            position: relative;
            &.active {
                color: #fff;
                .detail_menu_icon {
                    display: block;
                }
            }
            .detail_menu_icon {
                display: none;
                position: absolute;
                bottom: -7px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 20px;
                color: #f4f5f6;
            }
        }
    }
    .detail_tables_icon, .hide_tables_icon {
        position: absolute;
        top: 0;
        right: 0;
        height: 44px;
        line-height: 44px;
        width: 56px;
        color: #fff;
        font-size: 25px;
        cursor: pointer;
        text-align: center;
        &.rotate {
            transform: rotate(180deg);
        }
    }
    .hide_tables_icon {
        right: 70px;
    }
}
</style>
